<!-- 当前组件名： component -->
<template>
  <div class='page_component' v-loading='loading'>
    <div class='page_component-container'>
      <cfCard title='' class='page-container-search'>
        <el-form slot="content" :model="searchParams" ref="searchParams" size="small" :inline="true" label-width="68px">
          <el-form-item label="登录地址" prop="ipaddr">
            <el-input v-model="searchParams.ipaddr" placeholder="请输入登录地址" clearable v-search="handleSearch" />
          </el-form-item>
          <el-form-item label="登录名称" prop="userName">
            <el-input v-model="searchParams.userName" placeholder="请输入登录名称" clearable v-search="handleSearch" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </cfCard>
      <div class='bottom12'></div>
      <cfCard title='列表' hasTable :tableObj='tableDataObj' class='page_component-container-bottom'>
        <!--表格区域-->
        <template slot='content'>
          <cfTable ref='cfTable' :tableDataObj='tableDataObj' :tableData='tableData'>
            <template slot='operate'>
              <el-table-column label='操作' width='100px' align='right'>
                <span slot-scope='{row}'>
                  <el-button type='text' size='small' class='delete-span' v-hasPermi="['monitor:online:forceLogout']" @click='handleForceLogout(row)'>强退</el-button>
                </span>
              </el-table-column>
            </template>
          </cfTable>
          <pagination :total='queryParams.total' :page.sync='queryParams.pageNum' :limit.sync='queryParams.pageSize' @pagination='getListFn'/>
        </template>
      </cfCard>
    </div>
  </div>
</template>

<script>
import { list, forceLogout } from "@/api/monitor/online";
export default {
  name: 'online',
  data() {
    return {
      loading: true, /**控制加载效果 */
      tableDataObj: {  /**表格控件*/
        id: 'id', /**表格唯一标识*/
        showSelection: true, /**控制表格多选*/
        showIndex: true, /**控制表格序号*/
        defaultExpandAll: true, /**控制树结构表格是否默认全部展开*/
        treeProps: {children: 'children', hasChildren: 'hasChildren'}, /**树结构表格配置项*/
        option: [ /**表格列项配置*/
          {id: 1, label: '会话编号', prop: 'tokenId', show: 1, needSlot: false},
          {id: 2, label: '登录名称', prop: 'userName', show: 1, needSlot: false},
          {id: 3, label: '部门名称', prop: 'deptName', show: 1, needSlot: false},
          {id: 4, label: '主机', prop: 'ipaddr', show: 1, needSlot: false},
          {id: 5, label: '登录地点', prop: 'loginLocation', show: 1, needSlot: false},
          {id: 6, label: '浏览器', prop: 'browser', show: 1, needSlot: false},
          {id: 7, label: '操作系统', prop: 'os', show: 1, needSlot: false},
          {id: 8, label: '登录时间', prop: 'loginTime', show: 1, needSlot: false},
        ]
      },
      tableData: [], /**表格数据*/
      searchParams: { /**搜索区域对象*/
        ipaddr: '',
        userName: '',
      },
      queryParams: { /**分页对象*/
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
    }
  },
  mounted() {
    this.getListFn();
  },
  methods: {
    async getListFn() { /**获取列表数据方法*/
      this.loading = true;
      const data = {
        ...this.searchParams,
        ...this.queryParams
      }
      const res = await list(data);
      if(res.code == 200) {
       this.tableData = res.rows;
       this.queryParams.total = res.total;
      }
      setTimeout(()=>{
        this.loading = false;
      }, 500)
    },
    handleForceLogout(obj) { /**强退列表数据方法*/
      this.$confirm(`是否确认强退名称为${obj.userName}的用户？`, '提示', {
        cancelText: '取消',
        confirmText: '确定'
      }).then(async ()=>{
        this.loading = true;
        const res = await forceLogout(obj.tokenId);
        if(res.code == 200) {
          this.$message.success('强退成功');
          this.handleSearch();
        }
        setTimeout(()=>{
          this.loading = false;
        }, 500)
      }).catch(()=>{})
    },
    handleSearch() { /**查询按钮事件*/
      this.queryParams.pageNum = 1;
      this.queryParams.total = 0;
      this.tableData = [];
      this.getListFn();
    },
    handleReset() { /**重置按钮事件*/
      this.resetForm('searchParams', ()=>{
        this.handleSearch();
      })
    },
  },
}
</script>

<style scoped lang='scss'>
.page_component {
  height: 100%;
  .page_component-container {

  }
}
</style>